import { useState } from 'react';

const BillingForm = () => {
  const [inputs, setInputs] = useState(['']);

  const handleInputChange = (index, event) => {
    const values = [...inputs];
    values[index] = event.target.value;
    setInputs(values);
  };

  const addInput = () => {
    setInputs([...inputs, '']);
  };

  const removeInput = (index) => {
    const values = [...inputs];
    values.splice(index, 1);
    setInputs(values);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission with inputs data
    console.log(inputs);
  };

  return (
    <form onSubmit={handleSubmit}>
      {inputs.map((input, index) => (
        <div key={index}>
          <input
            type="text"
            value={input}
            onChange={(event) => handleInputChange(index, event)}
            placeholder="Enter something..."
          />
          <button type="button" onClick={() => removeInput(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={addInput}>
        Add Input
      </button>
      <button type="submit">Submit</button>
    </form>
  );
};

export default BillingForm;